<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title th:text="${game.name} + ' - GameStore'">游戏详情</title>
  <!-- 引入Tailwind CSS和Font Awesome -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#722ED1',
            dark: '#1D2129',
            light: '#F2F3F5'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>
</head>
<body class="bg-gradient-to-br from-light to-gray-200 min-h-screen font-inter">
<!-- 导航栏 -->
<header class="fixed top-0 left-0 right-0 z-50 bg-white navbar-shadow transition-all duration-300">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16 md:h-20">
      <!-- Logo -->
      <a href="/home" class="flex items-center space-x-2">
        <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
          <i class="fa fa-gamepad text-white text-xl"></i>
        </div>
        <span class="text-xl font-bold text-primary">GameStore</span>
      </a>

      <!-- 搜索框 -->
      <div class="hidden md:flex items-center flex-1 max-w-md mx-8">
        <div class="relative w-full">
          <input type="text" placeholder="搜索游戏..."
                 class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-primary">
          <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <i class="fa fa-search text-gray-400"></i>
          </div>
          <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-primary">
            <i class="fa fa-arrow-right"></i>
          </button>
        </div>
      </div>

      <!-- 用户菜单 -->
      <div class="flex items-center space-x-4">
        <a href="#" class="hidden md:block text-gray-600 hover:text-primary transition-colors">
          <i class="fa fa-shopping-cart text-xl"></i>
        </a>
        <a href="/login" class="hidden md:block text-gray-600 hover:text-primary transition-colors">
          <i class="fa fa-user-circle text-xl"></i>
        </a>
        <button class="md:hidden text-gray-600" id="mobileMenuButton">
          <i class="fa fa-bars text-xl"></i>
        </button>
      </div>
    </div>
  </div>
</header>

<!-- 移动端搜索框 -->
<div class="md:hidden px-4 py-3 bg-white border-b">
  <div class="relative w-full">
    <input type="text" placeholder="搜索游戏..."
           class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-primary">
    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
      <i class="fa fa-search text-gray-400"></i>
    </div>
    <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-primary">
      <i class="fa fa-arrow-right"></i>
    </button>
  </div>
</div>

<!-- 主要内容 -->
<main class="container mx-auto px-4 pt-24 pb-12">
  <!-- 面包屑导航 -->
  <div class="flex items-center text-sm text-gray-500 mb-6">
    <a href="/home" class="hover:text-primary">首页</a>
    <span class="mx-2">/</span>
    <a href="/games" class="hover:text-primary">游戏列表</a>
    <span class="mx-2">/</span>
    <span class="text-gray-700" th:text="${game.name}">游戏名称</span>
  </div>

  <!-- 游戏详情 -->
  <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
    <!-- 游戏图片 -->
    <div class="lg:col-span-2">
      <div class="bg-white rounded-xl overflow-hidden shadow-lg">
        <img th:src="${game.imageUrl}" th:alt="${game.name}"
             class="w-full h-auto object-cover" alt="游戏图片">
      </div>
    </div>

    <!-- 游戏信息 -->
    <div class="lg:col-span-3">
      <div class="bg-white rounded-xl p-6 shadow-lg">
        <h1 class="text-2xl md:text-3xl font-bold text-dark mb-2" th:text="${game.name}">游戏名称</h1>

        <div class="flex items-center text-gray-500 text-sm mb-4">
                        <span class="mr-4">
                            <i class="fa fa-calendar-o mr-1"></i>
                            <span th:text="${#dates.format(game.createTime, 'yyyy-MM-dd')}">发布日期</span>
                        </span>
          <span>
                            <i class="fa fa-gamepad mr-1"></i>
                            <span th:text="${game.stock}">库存</span> 份
                        </span>
        </div>

        <div class="flex items-center mb-6">
          <span class="text-3xl font-bold text-primary mr-3" th:text="'¥' + ${#numbers.formatDecimal(game.price, 1, 2)}">¥0.00</span>
        </div>

        <p class="text-gray-700 mb-6" th:text="${game.description}">游戏描述...</p>

        <div class="flex flex-wrap gap-4 mb-6">
          <button class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-semibold rounded-lg shadow-lg shadow-primary/20 btn-hover">
            <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
          </button>
          <button class="px-6 py-3 bg-secondary hover:bg-secondary/90 text-white font-semibold rounded-lg shadow-lg shadow-secondary/20 btn-hover">
            <i class="fa fa-heart mr-2"></i> 收藏
          </button>
        </div>

        <div class="border-t pt-6">
          <h3 class="text-lg font-semibold text-dark mb-4">游戏详情</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex items-start">
              <i class="fa fa-id-card text-primary mt-1 mr-3"></i>
              <div>
                <h4 class="font-medium text-gray-800">游戏ID</h4>
                <p class="text-gray-600" th:text="${game.id}">ID</p>
              </div>
            </div>
            <div class="flex items-start">
              <i class="fa fa-user-circle text-primary mt-1 mr-3"></i>
              <div>
                <h4 class="font-medium text-gray-800">发布日期</h4>
                <p class="text-gray-600" th:text="${#dates.format(game.createTime, 'yyyy-MM-dd HH:mm')}">日期</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 相关游戏 -->
  <div class="mt-12">
    <h2 class="text-xl font-bold text-dark mb-6">相关游戏</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- 这里将通过JavaScript动态填充相关游戏 -->
    </div>
  </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="mb-4 md:mb-0">
        <div class="flex items-center space-x-2">
          <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
            <i class="fa fa-gamepad text-primary text-xl"></i>
          </div>
          <span class="text-xl font-bold text-white">GameStore</span>
        </div>
        <p class="text-gray-400 mt-2">© 2025 GameStore. 保留所有权利</p>
      </div>
      <div class="flex space-x-6">
        <a href="#" class="text-gray-400 hover:text-white transition-colors">
          <i class="fa fa-facebook text-xl"></i>
        </a>
        <a href="#" class="text-gray-400 hover:text-white transition-colors">
          <i class="fa fa-twitter text-xl"></i>
        </a>
        <a href="#" class="text-gray-400 hover:text-white transition-colors">
          <i class="fa fa-instagram text-xl"></i>
        </a>
        <a href="#" class="text-gray-400 hover:text-white transition-colors">
          <i class="fa fa-youtube-play text-xl"></i>
        </a>
      </div>
    </div>
  </div>
</footer>

<script>
  // 页面加载时执行
  document.addEventListener('DOMContentLoaded', function() {
    // 初始化页面元素
    initPage();
  });

  // 初始化页面
  function initPage() {
    // 获取URL中的游戏ID
    const gameId = getGameIdFromUrl();

    if (gameId) {
      // 获取游戏详情
      fetchGameDetails(gameId);

      // 获取相关游戏
      fetchRelatedGames(gameId);
    }
  }

  // 从URL中获取游戏ID
  function getGameIdFromUrl() {
    const pathname = window.location.pathname;
    const parts = pathname.split('/');
    return parts[parts.length - 1];
  }

  // 获取游戏详情
  function fetchGameDetails(gameId) {
    fetch(`/game/${gameId}`)
            .then(response => response.json())
            .then(game => {
              // 使用Thymeleaf渲染的方式已经在HTML中处理，这里可以添加额外的处理
              console.log('游戏详情:', game);
            })
            .catch(error => {
              console.error('获取游戏详情出错:', error);
              alert('获取游戏详情失败，请稍后重试');
            });
  }

  // 获取相关游戏
  function fetchRelatedGames(gameId) {
    fetch(`/games/related/${gameId}`)
            .then(response => response.json())
            .then(games => {
              displayRelatedGames(games);
            })
            .catch(error => {
              console.error('获取相关游戏出错:', error);
            });
  }

  // 显示相关游戏
  function displayRelatedGames(games) {
    const container = document.querySelector('.grid-cols-4');

    if (games && games.length > 0) {
      games.forEach(game => {
        const gameCard = document.createElement('div');
        gameCard.className = 'bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer';

        // 添加点击事件，跳转到游戏详情页
        gameCard.addEventListener('click', function() {
          window.location.href = `/game/${game.id}`;
        });

        gameCard.innerHTML = `
                        <div class="relative h-40 overflow-hidden">
                            <img src="${game.imageUrl || 'https://picsum.photos/600/400'}" alt="${game.name}"
                                 class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                            <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                                ¥${game.price.toFixed(2)}
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-bold text-lg text-dark mb-2 line-clamp-1">${game.name}</h3>
                            <div class="flex items-center text-sm text-gray-500">
                                <span class="flex items-center mr-3">
                                    <i class="fa fa-gamepad mr-1"></i> ${game.stock} 份
                                </span>
                            </div>
                        </div>
                    `;

        container.appendChild(gameCard);
      });
    } else {
      container.innerHTML = `
                    <div class="col-span-full text-center py-12">
                        <p class="text-gray-500">暂无相关游戏</p>
                    </div>
                `;
    }
  }
</script>
</body>
</html>